<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
  <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css">
  <script src="http://unpkg.com/iview/dist/iview.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/locale/zh-cn.js"></script>
  <script src="./assets/lib/axios.min.js"></script>
  <link rel="stylesheet" href="./assets/css/hoteldetails.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet">
  <!-- Include the Swiper library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
  <!-- Swiper JS Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script>
  <script src="./assets/js/axios.js"></script>
  <script src="./assets/lib/lodash.deelclone.min.js"></script>
  <script>
    var lodash = _;
  </script>
  <script type="text/javascript" src="./assets/lib/vue-hotel-datepicker.min.js"></script>

  <title>Document</title>
  <script>
    Vue.use(window.VueAwesomeSwiper)
  </script>
</head>

<body>
  <div class="wrap" id='wrap'>
    <div class="pic_swipe">
      <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">

        <swiper-slide style="background-size: 795px 325px;" class="slide-1" :key="index" v-for="(item,index) in allImagesList" :style="{backgroundImage: 'url(' + item + ')'}"></swiper-slide>

        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      </swiper>
      <!-- swiper2 Thumbs -->
      <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
        <swiper-slide class="slide-1" :key="index" v-for="(item,index) in allImagesList" :style="{backgroundImage: 'url(' + item + ')'}"></swiper-slide>

      </swiper>
    </div>
    <div class="datebar" v-if="checkDate" id="datebar">
      <div class="hotelbar">
        <ul>
          <li class="covered">
            <a href="#datebar">房型</a>
          </li>
          <li>
            <a href="#hotelinfo">酒店信息</a>
          </li>
        </ul>
      </div>
      <ddd @in-changed='checkInChanged' @out-changed="checkOutChanged" class="calendar" :i18n="ptBr" :start-date='new Date() '
        :ending-date-value="new Date(checkDate.DepartureDate)" :starting-date-value="new Date(checkDate.ArrivalDate) ">
      </ddd>
    </div>
    <div class="detailscontent" id="detailscontent" ref="detailscontent">
      <div class="roomList" v-if="onLineHotel">
        <roomitem v-for="(item,index) in onLineHotel.Rooms" :roominfo="item" :prepay-rules="onLineHotel.PrepayRules"></roomitem>
      </div>
    </div>
    <div class="hotelinfo-c" ref="hotelinfo">

      <div class="hotelinfo" id="hotelinfo" v-if="localeStaticHotel">
        <div class="title">
          酒店信息
        </div>
        <ul class="faci">
          <li v-for="(item,index) in hotelService(localeStaticHotel.Detail.Facilities)">
            <i class="icon_faci  icon_big" :class="'icon_'+item.tag"></i>
            <p>{{item.tip}}</p>
          </li>
        </ul>
        <div class="dview_info">
          <div class="line">
            <div class="tagname">
              酒店电话:
            </div>
            <div class="details">
              {{localeStaticHotel.Detail.Phone}}
            </div>
          </div>
          <div class="line">
            <div class="tagname">
              入离时间:
            </div>
            <div class="details">
              入住时间:{{localeStaticHotel.Detail.ArrivalTime}}点以后，离店时间:{{localeStaticHotel.Detail.DepartureTime}}点以前
            </div>
          </div>
          <div class="line">
            <div class="tagname">
              开业时间:
            </div>
            <div class="details">
              酒店开业时间 {{localeStaticHotel.Detail.EstablishmentDate}}
            </div>
          </div>
          <div class="line">
            <div class="tagname">
              酒店设施:
            </div>
            <div class="details">
              {{localeStaticHotel.Detail.GeneralAmenities}}
            </div>
          </div>
          <div class="line">
            <div class="tagname">
              酒店简介:
            </div>
            <div class="details">
              {{localeStaticHotel.Detail.IntroEditor}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="navbar" v-if="navbarshow">
      <div class="wrap topdiv">
        <div class="datebar topdiv" v-if="checkDate" id="datebar">
          <div class="hotelbar">
            <ul>
              <li @click="clicknav('type')" ref="hoteltypetag" :class="{covered:bartag=='type'}">
                <a href="#datebar">房型</a>
              </li>
              <li @click="clicknav('info')" :class="{covered:bartag=='info'}">
                <a href="#hotelinfo" ref="hotelinfotag">酒店信息</a>
              </li>
            </ul>
          </div>
          <ddd @in-changed='checkInChanged' @out-changed="checkOutChanged" class="calendar" :i18n="ptBr" :start-date='new Date() '
            :ending-date-value="new Date(checkDate.DepartureDate)" :starting-date-value="new Date(checkDate.ArrivalDate) ">
          </ddd>
        </div>
      </div>
    </div>
  </div>

  <script>
    var self = null;
    Vue.component('roomitem', {
      template: `
      <div class="roomitem" v-if="roominfo">
          <div class="up">
            <div class="img">
              <img :src="roominfo.ImageUrl" alt="">
            </div>
            <div class="roominfo">
              <p class="room-title">{{roominfo.Name}}</p>
              <div class="roomtip">
                <ul class="css-not-selector-shortcut">
                  <li>房间{{roominfo.Area}}m²</li>
                  <li>{{roominfo.BedType}}</li>
                  <li>可住{{roominfo.Capcity}}</li>
                  <li>楼层{{roominfo.Floor}}</li>
                  <li>{{netStatus(roominfo.Broadnet)}}</li>
                </ul>
              </div>
            </div>
            <div class="priceinfo">
              <p class="price">
                <em>￥</em>{{getLowestPrice(roominfo.RatePlans)}}
                <span>起</span>
              </p>
              <p class="pro-tip" @click="clicktoShow">共{{roominfo.RatePlans.length}}个产品
                <Icon type="arrow-down-b" v-show="!isopen"></Icon>
                <Icon type="arrow-up-b" v-show="isopen"></Icon>
              </p>
            </div>
          </div>
          <div class="down" v-show="isopen">
            <table border="0">
              <thead>
                <tr>
                  <th class="ht_empty"></th>
                  <th class="ht_name">产品名称</th>
                  <th class="ht_supply">供应商</th>
                  <th class="ht_brak">早餐</th>
                  <th class="ht_rule">取消规则</th>
                  <th class="ht_pri">价格</th>
                  <th class="ht_pay"></th>
                  <th class="ht_empty"></th>
                </tr>
              </thead>
              <tbody border="0"> 
                <tr v-for="(item,index) in roominfo.RatePlans" :key="index">
                  <td class="ht_empty"></td>
                  <td class="ht_empty">{{item.RatePlanName}}</td>
                  <td class="ht_empty"></td>
                  <td  class="ht_brak">
                    <poptip trigger="hover"  :content="getValueAddsRules(item.ValueAddIds).content">
                      {{getValueAddsRules(item.ValueAddIds).name}}
                                      </poptip> 
                 </td>
                  <td class="ht_rule">
                   <poptip trigger="hover"  :content="formatPrepayRules(item.PrepayRuleIds).content">
                    <span>{{formatPrepayRules(item.PrepayRuleIds).name}}</span>                   
                                      </poptip> 
                                      </td>
                  <td class="ht_pri">
                    <span>
                      <em>￥</em>
                      {{item.AverageRate}}
                    </span>
                  </td>
                  <td></td>
                  <td>
                      <i-button type="error" @click="toOrder(item)">预定</i-button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="pic-ccc">
            <div class="roompicture" v-for="(item,index) in getRoomPictures(roominfo.RoomId)">
              <template v-for="(iitem,iindex) in item.Locations.Location">
                <poptip trigger="hover"  width="400" v-if="iitem['@Size']=='2'">
                  <img :src="iitem['#text']" />
                  <div class="big-img" slot="content">
                    <img :src="ii['#text']" v-for="(ii,ind) in item.Locations.Location" v-if="ii['@Size']=='1'"/>
                  </div>
                </poptip>
              </template>
             </div>
            </div>
          </div>
        </div>
      `,
      data() {
        return {
          isopen: true,
          // ArrivalDate: '',
          // DepartureDate: ''
        }
      },
      props: {
        roominfo: {
          type: Object,

        },
        prepayRules: {
          type: Array,
          default: function () {
            return [];
          }
        }
      },
      computed: {
        ArrivalDate() {
          return this.$root.checkDate.ArrivalDate;
        },
        DepartureDate() {
          return this.$root.checkDate.DepartureDate;
        }
      },
      created() {
        // this.ArrivalDate = this.$root.checkDate.ArrivalDate;
        // this.DepartureDate = this.$root.checkDate.DepartureDate;
      },
      methods: {
        toOrder(item) {
          console.log('todorder', this.$root.searchparams);
          window.location.href='florder.html?HotelIds='+this.$root.searchparams.HotelIds+'&ArrivalDate='+this.$root.searchparams.ArrivalDate+'&DepartureDate='+this.$root.searchparams.DepartureDate+'&RatePlanId='+item.RatePlanId+"&RoomTypeId="+item.RoomTypeId;
          
        },
        formatTypeCode(code) {
          switch (code) {
            case '01':
              return '早';
            case '02':
              return '午餐';
            case '03':
              return '晚餐';
            case '04':
              return '宽带上网';
            case '05':
              return '服务费';
            case '06':
              return '政府税';
            case '99':
              return '特殊早餐';
          }
        },
        getValueAddsRules(rulid) {

          var food = {};
          var sef = this;
          console.log('服务ID', rulid)
          var r_arr = rulid.split(',');
          var f_dd = this.$root.onLineHotel.ValueAdds.filter(function (item) {
            for (var ii = 0; ii < r_arr.length; ii++) {
              return item.ValueAddId == r_arr[ii];
            }
          });
        if(f_dd.length==0){
          return{
              name:'不含早',
              content:'无'
           }
        }
          
          if (f_dd[0].IsInclude) {
            food.name = '含' + sef.formatTypeCode(f_dd[0].TypeCode)

          } else {
            food.name = '不含' + sef.formatTypeCode(f_dd[0].TypeCode)
          }
          food.content = f_dd[0].Description;
          return food;
        },
        getRoomPictures(roomid) {
          var f_a = this.$root.localeStaticHotel.Images.Image.filter(function (item) {
            return item['@RoomId'] == roomid;
          })
          console.log('筛选的房间', f_a);
          return f_a;
        },
        formatPrepayRules(PrepayRuleIds) {
          var currentRules_obj = null;
          var cancel_obj = {};
          var firstrul = "";
          var secrul = "";
          console.log('this.PrepayRules.length', PrepayRuleIds);
          if (this.prepayRules.length > 0) {
            currentRules_obj = this.prepayRules.filter(function (item) {
              return item.PrepayRuleId == PrepayRuleIds
            });
            console.log('currentRules_obj', currentRules_obj);
            if (currentRules_obj.length > 0) {
              if (currentRules_obj[0].ChangeRule == 'PrepayNoChange') {
                cancel_obj = {
                  name: '不可取消',
                  content: '订单一经预订成功，不可变更/取消，如未入住将扣除全额房费。'
                }
                // return '不可取消'
              } else if (currentRules_obj[0].ChangeRule == 'PrepayNeedSomeDay') {
                var firsttime = moment(this.ArrivalDate).subtract(currentRules_obj[0].Hour, 'hours').format(
                  'YYYY-MM-DD HH:MM');
                var secondtime = moment(this.ArrivalDate).subtract(currentRules_obj[0].Hour2, 'hours').format(
                  'YYYY-MM-DD HH:MM');
                console.log('第一阶段', firsttime);
                console.log('第二阶段', secondtime);
                console.log('===================================');
                if (moment().isBefore(firsttime)) {
                  if (currentRules_obj[0].DeductFeesBefore) {
                    firstrul = '在' + firsttime + '扣款' + currentRules_obj[0].DeductNumBefore;
                  } else {
                    firstrul = '在' + firsttime + '免费取消';
                  }
                }

                if (currentRules_obj[0].DeductFeesAfter) {
                  if (currentRules_obj[0].CashScaleFirstAfter == 'Money') {
                    firstrul += '在' + secondtime + '之前取消扣款￥' + currentRules_obj[0].DeductNumAfter;

                  } else if (currentRules_obj[0].CashScaleFirstAfter == 'Percent') {
                    if (currentRules_obj[0].DeductNumAfter == 100) {
                      firstrul += '在' + secondtime + '之前取消扣除全额房费';
                    } else {
                      firstrul += '在' + secondtime + '之前取消扣除全额房费的' + currentRules_obj[0].DeductNumAfter + '%';

                    }

                  } else if (currentRules_obj[0].CashScaleFirstAfter == 'FristNight') {
                    firstrul += '在' + secondtime + '之前取消扣首晚房费';

                  }
                } else {
                  firstrul += '在' + secondtime + '之前取消' + '不扣款';
                }

                console.log(firstrul);
                console.log('===================================');
                cancel_obj = {
                  name: '限时取消',
                  content: firstrul
                }
                // return '限时取消'
              } else if (currentRules_obj[0].ChangeRule == 'PrepayNeedOneTime') {
                var freecanceltime = moment(currentRules_obj[0].DateNum + ' ' + currentRules_obj[0].Time).format(
                  'YYYY-MM-DD HH:mm');
                console.log('在之' + freecanceltime + '前免费取消')
                firstrul = '在之' + freecanceltime + '前免费取消';
                cancel_obj = {
                  name: '限时免费取消',
                  content: firstrul
                }
                // return '限时免费取消'
              }

            }
            return cancel_obj;
          }
        },
        getLowestPrice(arr) {
          // var
          var dc = lodash.cloneDeep(arr);
          dc.sort(function (a, b) {
            return a.AverageRate - b.AverageRate;
          });
          return dc[0].AverageRate;
        },
        netStatus(st) {
          // 0-无
          // 1-免费宽带
          // 2-收费宽带
          // 3-免费WIFI
          // 4-收费WIFI
          /*
           *1.酒店对应的图片轮播展示 替换移动端的340px的图片转换成740px的尺寸
           *2.酒店的产品展示功能
           *
           *3 酒店的取消规则计算
           *
           *4 对于动态改变的预定酒店的时间
           *5 酒店的订单管理*/
          switch (st) {
            case '0':
              return '无'
              break;
            case '1':
              return '免费宽带'
              break;
            case '2':
              return '收费宽带'
              break;
            case '3':
              return '免费WIFI'
              break;
            case '4':
              return '收费WIFI'
              break;
          }
        },
        clicktoShow() {
          this.isopen = !this.isopen;
        }
      }

    })
    //=========================================================================================================
    var app = new Vue({
      el: '#wrap',
      components: {
        'ddd': HotelDatePicker
      },
      data() {
        return {
          searchparams: {
            ArrivalDate: moment().format('YYYY-MM-DD'),
            DepartureDate: moment().add(1, 'days').format('YYYY-MM-DD'),
            HotelIds: this.GetQueryString('hotelid'),
            Options: "1,2,4",
            RatePlanId: 0
          },
          bartag: 'type',
          ptBr: {
            night: '晚',
            nights: '晚',
            'day-names': ['日', '一', '二', '三', '四', '五', '六'],
            'check-in': '入住日期',
            'check-out': '离店日期',
            'month-names': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
              '10月', '11月', '12月'
            ],
          },
          navbarshow: false,
          checkDate: null,
          onLineHotel: null, //动态库存信息
          allImagesList: [], //所有的图片
          localeStaticHotel: null, //静态酒店信息
          swiperOptionTop: {
            spaceBetween: 10,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          },
          swiperOptionThumbs: {
            spaceBetween: 10,
            centeredSlides: true,
            slidesPerView: 'auto',
            touchRatio: 0.2,
            slideToClickedSlide: true
          }
        }
      },
      created() {
        self = this;
        this.$Spin.show({
          render: (h) => {
            return h('div', [
              h('Icon', {
                'class': 'spin-icon-load',
                props: {
                  type: 'load-c',
                  size: 18
                }
              }),
              h('div', 'Loading')
            ])
          }
        });
        var hotel_str = localStorage.getItem('hoteldetails');
        if (hotel_str) {
          
          var searchparams = JSON.parse(hotel_str);
          if(searchparams.HotelIds == this.GetQueryString('hotelid')){
            self.searchparams = searchparams;
          }
        } else {
          // window.location.href = 'index.html';
        }
        if (self.searchparams.HotelIds == this.GetQueryString('hotelid')) {
          //查询酒店信息
          axios.all([this.getOnlineHotelDetails(self.searchparams), this.getLocalHotelDetails(self.searchparams)]).then(
            axios.spread(function (onLineDetail, localDetails) {
              console.log('动态库存', onLineDetail);
              console.log('静态2', localDetails);
              self.localeStaticHotel = localDetails.data.Hotel;
              self.onLineHotel = onLineDetail.data.Result.Hotels[0];
              self.allImagesList = self.formatAllImagesList(self.localeStaticHotel.Images.Image);
              self.checkDate = {
                ArrivalDate: self.searchparams.ArrivalDate,
                DepartureDate: self.searchparams.DepartureDate
              }
              self.$Spin.hide();
            }))

        } else {
          // window.location.href = 'index.html';
        }
      },
      mounted() {
        var ctoTop = this.$refs.detailscontent.offsetTop;
        var infoTop = 0;
        console.log('滚动', infoTop);
        console.log('滚动', this.$refs.hotelinfo);
        var currentH = 0;
        window.onscroll = function () {
          currentH = document.documentElement.scrollTop;//当前的高度
          infoTop = self.$refs.hotelinfo.offsetTop;
          console.log('infoTop', infoTop);
          if (currentH >= ctoTop) {
            console.log('需要显示');
            self.navbarshow = true;
          } else {
            self.navbarshow = false;
            console.log('不要显示');
          }

          if (currentH >= infoTop) {
            self.bartag = 'info'
          } else {
            self.bartag = 'type'

          }
        }

        this.$nextTick(() => {
          const swiperTop = this.$refs.swiperTop.swiper
          const swiperThumbs = this.$refs.swiperThumbs.swiper
          swiperTop.controller.control = swiperThumbs
          swiperThumbs.controller.control = swiperTop

        })
      },
      methods: {
        clicknav(dd) {
          this.bartag = dd;
        },
        checkOutChanged(v) {
          // this.checkDate.DepartureDate= moment(v).format('YYYY-MM-DD');
          console.log('out', v);
          if (v) {
            this.$Spin.show({
              render: (h) => {
                return h('div', [
                  h('Icon', {
                    'class': 'spin-icon-load',
                    props: {
                      type: 'load-c',
                      size: 18
                    }
                  }),
                  h('div', 'Loading')
                ])
              }
            });
            this.searchparams.DepartureDate = moment(v).format('YYYY-MM-DD');
            axios.all([this.getOnlineHotelDetails(this.searchparams), this.getLocalHotelDetails(this.searchparams)]).then(
              axios.spread(function (onLineDetail, localDetails) {
                console.log('动态库存', onLineDetail);
                console.log('静态2', localDetails);
                self.localeStaticHotel = localDetails.data.Hotel;
                self.onLineHotel = onLineDetail.data.Result.Hotels[0];
                self.allImagesList = self.formatAllImagesList(self.localeStaticHotel.Images.Image);
                self.checkDate = {
                  ArrivalDate: self.searchparams.ArrivalDate,
                  DepartureDate: self.searchparams.DepartureDate
                }
                localStorage.setItem('hoteldetails', JSON.stringify(self.searchparams))
                self.$forceUpdate();
                self.$Spin.hide();
              }))
          }
        },
        checkInChanged(v) {
          console.log('in');
          // this.checkDate.ArrivalDate= moment(v).format('YYYY-MM-DD');
          this.searchparams.ArrivalDate = moment(v).format('YYYY-MM-DD');

        },

        hotelService(service) {
          if (service != null) {

            var classtyle = [];
            var d = service.split(',');
            for (var i = 0; i < d.length; i++) {
              if (this.hotelserviceswitch(d[i]) != '') {
                classtyle.push(this.hotelserviceswitch(d[i]));
              }
            }
            return classtyle;
          } else {
            return [];
          }
        },
        hotelserviceswitch(service) {
          switch (service) {
            case '1':
              return { tag: 'wifi', tip: '免费WIFI' };
              break;
            case '2':
              return { tag: 'wifi', tip: '收费WIFI' };
              break;
            case '3':
              return { tag: 'wifi', tip: '免费宽带' };
              break;
            case '4':
              return { tag: 'wifi', tip: '收费宽带' };
              break;
            case '5':
              return { tag: 'parking', tip: '免费停车' };
              break;
            case '6':
              return { tag: 'parking', tip: '收费停车' };
              break;
            case '7':
              return { tag: 'pickup', tip: '免费接机服务' };
              break;
            case '8':
              return { tag: 'pickup', tip: '收费接机服务' };
              break;
            case '9':
              return { tag: 'swimmingpool', tip: '室内游泳池' };
              break;
            case '10':
              return { tag: 'swimmingpool', tip: '室外游泳池' };
              break;
            case '11':
              return { tag: 'fitness', tip: '健身房' };
              break;
            case '13':
              return { tag: 'meeting', tip: '会议室' };
              break;
            case '14':
              return { tag: 'restaurant', tip: '餐厅' };
              break;
            case '16':
              return { tag: 'luggage', tip: '行李寄存' };
              break;
            default:
              return '';
          }
        },
        formatAllImagesList(list) {
          var dd = [];
          for (var i = 0; i < list.length; i++) {
            for (var j = 0; j < list[i].Locations.Location.length; j++) {
              if (list[i].Locations.Location[j]['@Size'] == '7') {
                dd.push(list[i].Locations.Location[j]['#text'].replace('Mobile640_960', 'Hotel795_325'))
                // Hotel795_325
              }

            }
          }

          return dd;
        },
        getOnlineHotelDetails: function getOLHDetails(sp) {
          return axios.post("/api/eLongHotels/HotelInfo/GetHDetail", sp);
        },
        getLocalHotelDetails: function getLcHDetails(sp) {
          return axios.get(
            "/api/eLongHotels/HotelXmlHandle/GetHotelDetail/" + sp.HotelIds
          );
        },
        GetQueryString: function GetQueryString(name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]);
          return null;
        }
      }
    })
  </script>
</body>

</html>